
<template>
  <el-container>
    <el-row>
      <router-title></router-title>
      <el-form :model="formData" ref="form" label-width="150px" :rules="rules">
        <el-form-item v-for="(item, key) in formInfoMaps" :label="item.label" label-width="150px" :prop="key">
          <el-input v-model="formData[key]" v-if="item.type === 1"></el-input>
          <el-radio-group v-model="formData[key]" v-if="item.type === 2">
            <el-radio v-for="(radio, radioIndex) in item.options" :label="radio.value" :name="key">{{radio.label}}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-model="formData[key]" v-if="item.type === 3" >
            <el-checkbox  v-for="(item, itemIndex) in item.options" :label="item.value">{{item.label}}</el-checkbox>
          </el-checkbox-group>
          <el-input type="textarea" v-model="formData[key]" v-if="item.type === 4" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitHandle()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </el-container>
</template>

<script>
	/**
	 * 此组件为编辑组件，添加、修改两种都可以。
	 * 必传参数： formData（表单数据绑定对象）、 formInfoMaps（表单信息的map数据，详见 assets/data/下面的信息）
	 * 可传参数，rules
	 * 组件必须注册submit事件，如： <editor v-on:submit="submit" /> ，如果表单合法，会触发此事件。
	 */
	import Title from './title';
	export default {
		props: {
			formData: {
				required: true,
				default: {}
			},
			formInfoMaps: {
				required: true,
				default: {}
			},
			rules: {
				type: Object,
				default: {}
			}
		},
		methods: {
			submitHandle(ev) {
				this.$refs.form.validate((valid) => {
		          if (valid) {
		            this.$emit('submit', ev);
		          } else {
		            return false;
		          }
		        });
			}
		},
		components: {
			'router-title': Title
		}
	}
</script>